<template>
	<el-menu
		:default-active="route.meta.id"
		mode="horizontal"
		background-color="whitesmoke"
		@select="handleSelect"
	>
		<el-menu-item
			v-for="item in routes"
			:key="item.meta.id"
			:index="item.meta.id"
			>{{ item.name }}</el-menu-item
		>
	</el-menu>
</template>

<script setup lang="ts">
import { routes } from "@/router";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

function handleSelect(key: number) {
	if (key >= 0) {
		router.push({ name: routes[key].name });
	}
}
</script>

<style>
.el-menu {
	display: flex;
	justify-content: space-around;
}
</style>
